<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <span>
          <b class="u-f-16">销售分析</b>
        </span>
      </div>
      <el-form :inline="true" size="small">
        <el-form-item label="时间筛选">
          <el-date-picker
            type="daterange"
            v-model="dtrange"
            align="left"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="handleDt"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div class="u-mt-30">
        <div class="common-title">
          <div class="line"></div>
          <div class="txt">分类统计</div>
        </div>
        <el-tabs v-model="activeTab" type="card" class="u-mt-20">
          <el-tab-pane label="分类商品销量" name="cate">
            <div id="chart-cate" class="chart-div"></div>
          </el-tab-pane>
          <el-tab-pane label="分类商品总金额" name="cateprice">
            <div id="chart-cateprice" class="chart-div"></div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="u-mt-30">
        <div class="common-title">
          <div class="line"></div>
          <div class="txt">商品统计</div>
        </div>
        <el-tabs v-model="goodsTab" type="card" class="u-mt-20">
          <el-tab-pane label="商品销量" name="goods">
            <div id="chart-goods" class="chart-div"></div>
          </el-tab-pane>
          <el-tab-pane label="商品总金额" name="goodsprice">
            <div id="chart-goodsprice" class="chart-div"></div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="u-mt-30">
        <div class="common-title">
          <div class="line"></div>
          <div class="txt">用户消费统计</div>
        </div>
        <el-tabs v-model="costTab" type="card" class="u-mt-20">
          <el-tab-pane label="用户消费比例" name="cost">
            <div id="chart-cost" class="chart-div"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { isEmpty } from "@/libs/util";
import analysisUser from "@/mixins/analysis-user";
import G2 from "@antv/g2";
// import echarts from "echarts";
export default {
  name: "UserSale",
  mixins: [analysisUser],
  data() {
    return {
      apiName: "userSale",
      activeTab: "cate",
      goodsTab: "goods",
      costTab: "cost",
      chart: {
        cate: null,
        cateprice: null,
        goods: null,
        goodsprice: null,
        cost: null,
      },
    };
  },
  methods: {
    // initChart(id, alias, name, field) {
    //   let dataList = [];
    //   let dateTime = [];
    //   let id_index = id;
    //   if (id == "cateprice") {
    //     id_index = 'cate';
    //   }
    //   if (id == "goodsprice") {
    //     id_index = 'goods';
    //   }
    //   this.chartData[id_index].forEach((item) => {
    //     dataList.push(item[field]);
    //     dateTime.push(item[name]);
    //   });
    //   // console.log(dateTime);
    //   // console.log(dataList);
    //   this.chart[id] = echarts.init(document.getElementById("chart-" + id));
    //   this.chart[id].setOption({
    //     title: { text: "" },
    //     tooltip: {
    //       trigger: "axis",
    //     },
    //     xAxis: {
    //       type: "category",
    //       boundaryGap: false,
    //       data: dateTime,
    //     },
    //     yAxis: {
    //       type: "value",
    //     },
    //     series: [
    //       {
    //         data: dataList,
    //         type: "line",
    //         // 普通样式。
    //         itemStyle: {
    //           // 点的颜色。
    //           color: "#67B6FF",
    //         },
    //         label: {
    //           normal: {
    //             show: true,
    //             position: "top",
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
    initChart(name, alias, field) {
      this.chart[name] = new G2.Chart({
        container: "chart-" + name,
        forceFit: true,
        height: 300,
        padding: [40, 60, 40, 100],
      });
      let sourceConfig =
        '{"' +
        field +
        '":{"min":0, "type":"linear","tickCount":5, "nice": true, "alias": "' +
        alias +
        '"}}';
      this.chart[name].source(this.chartData.cate, JSON.parse(sourceConfig));
      this.chart[name].axis("name", {
        label: {
          offset: 20,
        },
      });
      this.chart[name]
        .point()
        .position("name*" + field)
        .size(3)
        .label("name*" + field, (date, val) => {
          return {
            content: val,
            style: {
              fontWeight: 300,
            },
          };
        })
        .style({ lineWidth: 2 });
      this.chart[name].line().position("name*" + field);

      this.chart[name].render();
    },
    goodsinitChart(name, alias, field) {
      this.chart[name] = new G2.Chart({
        container: "chart-" + name,
        forceFit: true,
        height: 300,
        padding: [40, 60, 40, 100],
      });
      let sourceConfig =
        '{"' +
        field +
        '":{"min":0, "type":"linear","tickCount":5, "nice": true, "alias": "' +
        alias +
        '"}}';
      this.chart[name].source(this.chartData.goods, JSON.parse(sourceConfig));
      this.chart[name].axis("name", {
        label: {
          offset: 20,
        },
      });
      this.chart[name]
        .point()
        .position("name*" + field)
        .size(3)
        .label("name*" + field, (date, val) => {
          return {
            content: val,
            style: {
              fontWeight: 300,
            },
          };
        })
        .style({ lineWidth: 2 });
      this.chart[name].line().position("name*" + field);
      this.chart[name].render();
    },
    costinitChart(name, alias, field) {
      this.chart[name] = new G2.Chart({
        container: "chart-" + name,
        forceFit: true,
        height: 300,
        padding: [40, 60, 40, 100],
      });
      let sourceConfig =
        '{"' +
        field +
        '":{"min":0, "type":"linear","tickCount":5, "nice": true, "alias": "' +
        alias +
        '"}}';
      this.chart[name].source(this.chartData.cost, JSON.parse(sourceConfig));
      this.chart[name].axis("name", {
        label: {
          offset: 20,
        },
      });
      this.chart[name]
        .point()
        .position("name*" + field)
        .size(3)
        .label("name*" + field, (date, val) => {
          return {
            content: val + "%",
            style: {
              fontWeight: 300,
            },
          };
        })
        .style({ lineWidth: 2 });
      this.chart[name].line().position("name*" + field);
      this.chart[name].render();
    },
    afterGetData() {
      this.activeTab = "cate";
      this.setChart();
      this.goodsTab = "goods";
      this.goodsetChart();
      this.costTab = "cost";
      this.costsetChart();
    },
    setChart() {
      if (!isEmpty(this.chart[this.activeTab])) {
        this.chart[this.activeTab].destroy();
      }
      switch (this.activeTab) {
        case "cate": {
          this.initChart("cate", "分类商品销量", "order_num");
          break;
        }
        case "cateprice": {
          this.initChart("cateprice", "分类商品总金额", "order_total");
          break;
        }
      }
    },
    goodsetChart() {
      if (!isEmpty(this.chart[this.goodsTab])) {
        this.chart[this.goodsTab].destroy();
      }
      switch (this.goodsTab) {
        case "goods": {
          this.goodsinitChart("goods", "分类商品销量", "goods_num");
          break;
        }
        case "goodsprice": {
          this.goodsinitChart("goodsprice", "分类商品总金额", "goods_total");
          break;
        }
      }
    },
    costsetChart() {
      if (!isEmpty(this.chart[this.costTab])) {
        this.chart[this.costTab].destroy();
      }
      switch (this.costTab) {
        case "cost": {
          this.costinitChart("cost", "用户消费比例", "cost");
          break;
        }
      }
    },
  },
  watch: {
    activeTab() {
      this.$nextTick(() => {
        this.setChart();
      });
    },
    goodsTab() {
      this.$nextTick(() => {
        this.goodsetChart();
      });
    },
  },
};
</script>

<style scoped>
.chart-div {
  width: 100%;
  height: 300px;
}
</style>